<template>
    <div class="cus-login-frame">
      <video src="../../assets/loginBg.webm" preload="auto" muted autoplay loop></video>
      <div class="login-form">
        <h1>电商科技·运营管理平台</h1>
        <p>
          <el-input placeholder="账号" autocomplete="off" prefix-icon="el-icon-user" v-model="username"></el-input>
        </p>
        <p>
          <el-input
            placeholder="密码"
            autocomplete="new-password"
            prefix-icon="el-icon-lock"
            show-password
            type="password"
            @keydown.enter.native="loginFn"
            v-model="password"></el-input>
        </p>
        <p>
          <el-row>
            <el-col :span="18">
              <el-input placeholder="验证码" autocomplete="off" prefix-icon="el-icon-user" v-model="code"></el-input>
            </el-col>
            <el-col :span="6"><img height="30px" width="90px" src="http://localhost:8080/code"></el-col>
          </el-row>
          
        </p>
        <el-button :loading="loading" @click="loginFn" type="primary" class="login-btn" round>登 录</el-button>
      </div>
    </div>
  </template>

<script setup lang="ts" name="loginIndex">
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
import { signIn } from '@/api/login/index';
import { Session } from '../../utils/storage';

import router from "@/router";

const username = ref('')
const password = ref('')
const code= ref('')
const loading = ref(false)
const loginFn = () => {
  if(username.value == ''){
    ElMessage.warning('账号不能为空')
    return
  }
  if(password.value == ''){
    ElMessage.warning('密码不能为空')
    return
  }
  if(code.value == ''){
    ElMessage.warning('验证码不能为空')
    return
  }
  loading.value = true
  signIn({
    username:username.value,
    password:password.value,
    code:code.value
  }).then((res:any) => {
    debugger
    console.log(res)
    Session.set("token",res.data)
    router.push("/home")
  }).catch(()=>{
    loading.value=false
  })
}
</script>
<style scoped lang="scss">
.cus-login-frame {
  display: flex;
  height: 100vh;
  width: 100vw;
  // background: url('') center / 100% no-repeat;
  video {
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
body {
  height: 100vh;
  background-color: #fbfbfd;
}
.login-form {
  h1 {
    text-align: center;
    padding: 30px 0;
    color: #fff;
    text-shadow: 0px 1px 2px #333;
  }
  backdrop-filter: blur(50px);
  background-color: rgba(160, 160, 160, 0.2);
  width: 500px;
  border-radius: 34px;
  box-shadow: 0 11px 34px 0 rgba(0, 0, 0, 0.3);
  padding: 40px;
  margin: 180px auto auto;
  font-size: 14px;
  transition: all 0.5s;
  p {
    margin: 20px 30px;
    .el-input__inner {
      height: 44px;
      line-height: 44px;
    }
    input {
      font-size: 15px;
      background-color: #fff;
      border-radius: 100px;
    }
    span {
      line-height: 30px;
    }
  }
  .login-btn {
    width: 140px;
    display: block;
    font-size: 15px;
    margin: 60px auto 0;
    box-shadow: 0 11px 34px 0 rgba(0, 0, 0, 0.3);
  }
}
</style>